<extend name="Extends/base" />
<block name="title">{$info.title}</block>
<block name="css">
</block>
<block name="body_style"></block>
<block name="body">
    <div class="c-main">
        <div class="bgc-fff xq-top">
            <div class="xq-top-img">
                <img src="{$info.cover}">
            </div>
            <div class="xq-top-cont">
                <p>{$info.title}</p>
                <div class="xq-top-time c-hide">
                    剩余时间
                    <span class="xq-timebox hour">00</span>:
                    <span class="xq-timebox minute">00</span>:
                    <span class="xq-timebox second">00</span>
                </div>
            </div>
            <div class="xq-top-price">+{:changePrice($info['income'])} 元</div>
        </div>

        <div class="bgc-fff mt10 plr15 ptb15">
            <div class="xq-people">
                <h2>{$info.join_num|default=0} 人正在做此任务，已完成 {$info.finish_num|default=0}</h2>
                <p>已抢 {$info.join_num|default=0}份｜共 {$info.num} 份</p>

                <if condition="$joinUserList">
                    <ul data-href="/Join/detial?id={$info.id}" class="jump-href xq-people-list">
                        <volist name="joinUserList" id="vo">
                            <li>
                                <img src="{$vo.photo}">
                            </li>
                        </volist>
                    </ul>
                </if>
                <div class="xq-people-right"></div>
            </div>
            <h2 class="xq-title">任务须知</h2>
            <div class="xq-notice" data-url="{$info.notice_url}">
                {$info.notice|default=" 他很懒，什么都没有填写"}
            </div>
            <h2 class="xq-title">任务步骤</h2>
            <div class="xq-notice">
                {$info.info|default=" 他很懒，什么都没有填写"}
            </div>
        </div>

        <div class="bgc-fff uploadbox">
            <switch name="joinInfo.state">
                <case value="1">
                    <a href="javascript:;" class="add-proof upload-btn">上传凭证</a>
                </case>
                <case value="2">
                    <a href="javascript:;" class="show-proof upload-btn">审核中</a>
                </case>
                <case value="3">
                    <a href="javascript:;" class="audit-btn">已完成</a>
                </case>
                <case value="-2">
                    <a href="javascript:;" class="show-proof upload-btn">审核未通过</a>
                </case>
                <default />
                <a href="javascript:;" class="join-task upload-btn">抢任务</a>
            </switch>
        </div>
    </div>

    <include file="Task/unfinishedHintPop" />
    <include file="Task/addProofHintPop" />
</block>
<block name="js">
    <script type="text/javascript" src="__APPS__/js/api.js?v={:C('JS_CSS_VERSION')}"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js?v={:C('JS_CSS_VERSION')}">
    </script>
    <script type="text/javascript">
        var taskId = "{$info.id}";
        var taskType = "{$info.type}";
        var endTime = parseInt("{:strtotime($info['end_time'])-time()}");
        var maxTaskCount = parseInt("{:C('MAX_JOIN_TASK_COUNT')}");

        $(function () {
            if (endTime > 0 && endTime <= 24 * 60 * 60) {
                //开启倒计时
                $('.xq-top-time').show();
                var index = setInterval(function () {
                    endTime -= 1;
                    if (endTime <= 0) {
                        clearInterval(index);
                    }
                    var hour = parseInt(endTime / 3600);
                    if (hour < 10) {
                        hour = "0" + hour;
                    }
                    var minute = parseInt((endTime % 3600) / 60);
                    if (minute < 10) {
                        minute = "0" + minute;
                    }
                    var second = parseInt(endTime % 60);
                    if (second < 10) {
                        second = "0" + second;
                    }
                    $('.xq-top-time .hour').text(hour);
                    $('.xq-top-time .minute').text(minute);
                    $('.xq-top-time .second').text(second);
                }, 1000);
            }

            //长按复制动作
            var clickUrl = $('.xq-notice').attr('data-url');
            if (clickUrl) {
                new ClipboardJS('.xq-notice', {
                    text: function (trigger) {
                        $.toast("复制成功");
                        return clickUrl;
                    }
                })

            };
        });


        //加入任务
        $('.c-main').on('click', '.join-task', function () {
            joinTask(function (res) {
                if (res.Code != 10000) {
                    $.toast(res.Message);
                    return false;
                }
                $.toast("加入成功", 1000, function () {
                    location.reload();
                });
            });
        });

        //关闭未完成任务弹窗
        $('#unfinishedHintMaskr,#unfinishedHintPop .xq-close').on('click', function () {
            unfinishedHintPopHide();
        });

        //不放弃任务
        $('#unfinishedHintPop .xq-noquite').on('click', function () {
            unfinishedHintPopHide();
        });

        //放弃任务
        $('#unfinishedHintPop .xq-quite').on('click', function () {
            doCancelUnfinishedJoinTask(taskType, function (res) {
                if (res.Code != 10000) {
                    $.toast(res.Message);
                    return false;
                }
                $.toast("操作成功", 800, function () {
                    unfinishedHintPopHide();
                    joinTask(function (res) {
                        if (res.Code != 10000) {
                            $.toast(res.Message);
                            return false;
                        }
                        $.toast("加入成功", 1000, function () {
                            location.reload();
                        });
                    });
                });
            });
        });

        /**
         * 显示提交证据的弹窗
         */
        $('.c-main').on('click', '.add-proof', function () {
            addProofHintPopShow();
        });

        $('.c-main').on("click", '.show-proof', function () {
            var url = $.sUrl("/join/submitPage", {
                "id": taskId
            });
            location.href = url;
        });

        /**
         * 关闭添加证明弹窗
         */
        $('#addProofHintMaskr,#addProofHintPop .xq-close').on('click', function () {
            addProofHintPopHide();
        });

        /**
         * 了解添加证明弹窗的声明
         */
        $('#addProofHintPop .xq-i-know').on('click', function () {
            var url = $.sUrl("/join/submitPage", {
                "id": taskId
            });
            location.href = url;
        });

        /**
         * 未完成任务弹窗显示
         */
        function unfinishedHintPopShow() {
            $('#unfinishedHintMaskr,#unfinishedHintPop').show();
        }

        /**
         * 未完成任务弹窗隐藏
         */
        function unfinishedHintPopHide() {
            $('#unfinishedHintMaskr,#unfinishedHintPop').hide();
        }

        /**
         * 加入任务
         * @param callback
         */
        function joinTask(callback) {
            if (typeof callback != "function") {
                callback = emptyFunc;
            }
            doGetUnfinishedTaskCount(taskType, function (res) {
                var count = parseInt(res.Result);
                if (count >= maxTaskCount) {
                    unfinishedHintPopShow();
                    return false;
                }
                doJoinTask(taskId, function (res) {
                    callback(res);
                });
            });
        }

        /**
         * 添加证明弹窗显示
         */
        function addProofHintPopShow() {
            $('#addProofHintMaskr,#addProofHintPop').show();
        }


        /**
         * 添加证明弹窗隐藏
         */
        function addProofHintPopHide() {
            $('#addProofHintMaskr,#addProofHintPop').hide();
        }
    </script>
</block>